<template>
    <div class="classify-box flex-align-center-col">
        <div class="search flex-center-col">
<!--            搜索框-->
            <SearchBox></SearchBox>


        </div>
<!--        分类栏-->
        <div class="classify-items flex-align-center-col" style="width: 100%;">

                <MyTabs :tab-list="tabList.list"> </MyTabs>
        </div>

<!--        显示栏目-->
    </div>
</template>

<script>
    import SearchBox from "@/components/other/SearchBox";
    import {reactive, ref} from "@vue/reactivity";
    import ArticleCard from "@/components/article/ArticleCard";
    import {onMounted} from "@vue/runtime-core";
    import axios from  'axios'


    import MyTabs from "@/components/article/MyTabs";
    import {useRoute, useRouter} from "vue-router";
    import {goTop} from "@/assets/js/utils";


    export default {
        name: "Classify",
        components: {MyTabs, ArticleCard, SearchBox},
        setup(){

            let classifyId=ref()

            let tabList=reactive({
                tId:0,
                list:[]
            })


            function getTabs(){
                return  axios.get("/api/tabs").then(res=>res.data)
            }

            onMounted(async ()=>{
                const data=await getTabs()
                if(data.code===200){
                    tabList.list=data.data
                }
                goTop()
            })


            return {
                tabList,
                classifyId
            }
        },

    }

</script>

<style scoped lang="less">
    .classify-box{
        width: 100%;
        background-color: var(--theme-color);

        .search{
            width: 100%;
            height: 400px;
            margin-top:50px;
            /*background-color: #028090;*/

        }
        .classify-items{
            min-height: 2000px;
        }


    }
</style>